<template>
  <dialog ref="dialogRef" class="modal" @close="close">
    <div class="modal-box max-w-[90vw] h-[90vh] flex flex-col">
      <form method="dialog">
        <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
      </form>

      <div class="flex items-center mb-4">
        <div class="w-10 h-10 rounded-lg bg-[#e6fcf5] flex items-center justify-center mr-3">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="#10b981"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v5Z" />
            <path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1" />
          </svg>
        </div>
        <h3 class="text-lg font-bold">招商建议</h3>
      </div>

      <div class="custom-tabs-container mb-4">
        <div class="custom-tabs-nav">
          <div
            v-for="(tab, index) in tabs"
            :key="index"
            class="custom-tab"
            :class="{ 'custom-tab-active': activeTab === index }"
            @click="activeTab = index"
          >
            {{ tab.title }}
            <div class="custom-tab-divider" v-if="index < tabs.length - 1"></div>
          </div>
        </div>
      </div>

      <div class="flex-1 h-0 overflow-hidden">
        <!-- 招商引资建议 -->
        <div v-if="activeTab === 0" class="p-4 overflow-auto h-full bg-[#f8f9fc] rounded-lg">
          <div class="space-y-4">
            <div
              v-for="(item, index) in suggestions"
              :key="index"
              class="bg-white p-4 rounded-lg shadow-sm"
            >
              <div class="flex items-center mb-3">
                <div class="w-6 h-6 rounded-full mr-2" :style="`background-color: ${item.bgColor}`">
                  <div class="w-full h-full flex items-center justify-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="14"
                      height="14"
                      viewBox="0 0 24 24"
                      fill="none"
                      :stroke="item.iconColor"
                      stroke-width="2.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <component :is="item.icon" />
                    </svg>
                  </div>
                </div>
                <span class="font-medium">{{ item.title }}</span>
              </div>
              <div class="space-y-3">
                <div
                  v-for="(point, pointIdx) in item.points"
                  :key="pointIdx"
                  class="pl-4 border-l-2 text-[#5e6c84]"
                  :style="`border-color: ${item.borderColor}`"
                >
                  {{ point }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 产业图谱数据 -->
        <div v-if="activeTab === 1" class="p-4 overflow-auto h-full bg-[#f8f9fc] rounded-lg">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div
              v-for="(item, index) in industryData"
              :key="index"
              class="bg-white p-4 rounded-lg shadow-sm"
            >
              <div class="flex items-center mb-3">
                <div class="w-6 h-6 rounded-full mr-2" :style="`background-color: ${item.bgColor}`">
                  <div class="w-full h-full flex items-center justify-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="14"
                      height="14"
                      viewBox="0 0 24 24"
                      fill="none"
                      :stroke="item.iconColor"
                      stroke-width="2.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <component :is="item.icon" />
                    </svg>
                  </div>
                </div>
                <span class="font-medium">{{ item.title }}</span>
              </div>
              <div class="flex flex-wrap gap-2">
                <a-tag v-for="(tag, idx) in item.tags" :key="idx" :color="item.color" size="small">
                  {{ tag }}
                </a-tag>
              </div>
            </div>
          </div>
        </div>

        <!-- 企业详情 -->
        <div v-if="activeTab === 2" class="p-4 overflow-auto h-full bg-[#f8f9fc] rounded-lg">
          <div class="space-y-4">
            <div class="font-medium text-[16px] mb-2">公司基础信息</div>
            <a-descriptions
              :data="companyInfo"
              layout="horizontal"
              :column="1"
              class="bg-white p-4 rounded-lg shadow-sm"
              :label-style="{
                'text-align': 'left',
                'font-weight': '500',
                color: '#5e6c84',
              }"
            />

            <div class="font-medium text-[16px] mt-5 mb-2">产品信息</div>
            <div class="bg-white p-4 rounded-lg shadow-sm">
              <div v-for="(item, index) in productList" :key="index" class="mb-3 last:mb-0">
                <a-tag :color="item.color" size="medium">{{ item.name }}</a-tag>
                <span class="ml-2 text-[#5e6c84]">{{ item.description }}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 招商项目进度 -->
        <div v-if="activeTab === 3" class="p-4 overflow-auto h-full bg-[#f8f9fc] rounded-lg">
          <div class="space-y-4">
            <div
              v-for="(item, index) in suggestions2"
              :key="index"
              class="bg-white p-4 rounded-lg shadow-sm"
            >
              <div class="flex items-center mb-3">
                <div class="w-6 h-6 rounded-full mr-2" :style="`background-color: ${item.bgColor}`">
                  <div class="w-full h-full flex items-center justify-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="14"
                      height="14"
                      viewBox="0 0 24 24"
                      fill="none"
                      :stroke="item.iconColor"
                      stroke-width="2.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <component :is="item.icon" />
                    </svg>
                  </div>
                </div>
                <span class="font-medium">{{ item.title }}</span>
              </div>
              <div class="space-y-3">
                <div
                  v-for="(point, pointIdx) in item.points"
                  :key="pointIdx"
                  class="pl-4 border-l-2 text-[#5e6c84]"
                  :style="`border-color: ${item.borderColor}`"
                >
                  {{ point }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <form method="dialog" class="modal-backdrop">
      <button>close</button>
    </form>
  </dialog>
</template>

<script setup>
import { ref, h } from "vue";

const dialogRef = ref(null);
const emit = defineEmits(["close"]);
const activeTab = ref(0);

// 标签页数据
const tabs = [
  { title: "招商引资建议" },
  { title: "产业图谱数据" },
  { title: "企业详情" },
  { title: "招商项目进度" },
];

// 企业详情数据
const companyInfo = [
  {
    label: "公司名称",
    value: "贵州锆石科技发展有限责任公司",
  },
  {
    label: "所属行业",
    value: "航空航天装备",
  },
  {
    label: "地理位置",
    value: "综保区",
  },
  {
    label: "子行业",
    value: "锻件&铸件，起落架系统",
  },
];

// 产品列表
const productList = [
  {
    name: "金属锻件",
    description: "有色金属冶炼及压延产品/十种有色金属",
    color: "blue",
  },
  {
    name: "无人机起落架",
    description: "航空航天装备关键部件",
    color: "green",
  },
];

// 图标组件定义
const checkIcon = {
  render: () => h("path", { d: "M20 6L9 17l-5-5" }),
};

const alertIcon = {
  render: () =>
    h("path", {
      d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z M12 9v4 M12 17h.01",
    }),
};

const targetIcon = {
  render: () =>
    h("circle", { cx: 12, cy: 12, r: 10 }, [
      h("circle", { cx: 12, cy: 12, r: 6 }),
      h("circle", { cx: 12, cy: 12, r: 2 }),
    ]),
};

const fileIcon = {
  render: () =>
    h("path", {
      d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z M14 2v6h6 M16 13H8 M16 17H8 M10 9H8",
    }),
};

// 产业图谱数据
const industryData = [
  {
    title: "起落架系统-强链",
    tags: ["设计与研发能力较强"],
    color: "green",
    bgColor: "#e6fcf5",
    iconColor: "#10b981",
    icon: checkIcon,
  },
  {
    title: "锻件&铸件-弱链",
    tags: ["原材料供应不稳定"],
    color: "orange",
    bgColor: "#fff7ed",
    iconColor: "#f97316",
    icon: alertIcon,
  },
  {
    title: "起落架系统-弱链",
    tags: ["关键零部件依赖进口"],
    color: "orange",
    bgColor: "#fff7ed",
    iconColor: "#f97316",
    icon: alertIcon,
  },
  {
    title: "政策支持",
    tags: ["政府对高端制造领域有扶持政策", "政府支持航空航天装备的国产化"],
    color: "purple",
    bgColor: "#f5f3ff",
    iconColor: "#8b5cf6",
    icon: fileIcon,
  },
  {
    title: "当前招商重点",
    tags: ["正在积极引进相关技术和人才", "重点吸引国内外领先企业合作"],
    color: "blue",
    bgColor: "#eff6ff",
    iconColor: "#3b82f6",
    icon: targetIcon,
  },
];

// 招商引资建议
const suggestions = [
  {
    title: "加强原材料供应链",
    points: [
      "加强与稳定原材料供应商的合作，确保生产过程的连续性。",
      "针对锻件&铸件业务中原材料供应不稳定的问题，建议建立多元化的供应渠道，降低供应链风险。",
    ],
    bgColor: "#e6fcf5",
    iconColor: "#10b981",
    borderColor: "#10b981",
    icon: checkIcon,
  },
  {
    title: "技术研发提升",
    points: [
      "通过与高校和研究机构合作，提升自身的技术水平，尤其是锻件&铸件领域的核心工艺。",
      "利用起落架系统设计与研发的优势，进一步扩大技术领先性，加快关键零部件的国产化进程。",
    ],
    bgColor: "#eff6ff",
    iconColor: "#3b82f6",
    borderColor: "#3b82f6",
    icon: targetIcon,
  },
  {
    title: "国际合作",
    points: [
      "吸引国内外领先企业合作，特别是能够提供关键零部件的企业，解决起落架系统关键零部件依赖进口的问题。",
      "积极引进国际先进技术和人才，提升公司在航空航天装备领域的整体竞争力。",
    ],
    bgColor: "#fff7ed",
    iconColor: "#f97316",
    borderColor: "#f97316",
    icon: alertIcon,
  },
  {
    title: "政策利用",
    points: [
      "充分利用政府对高端制造和航空航天装备的支持政策，争取更多的资金和技术支持。",
      "积极参与国家航空航天装备国产化计划，获取政府项目支持和市场机会。",
    ],
    bgColor: "#f5f3ff",
    iconColor: "#8b5cf6",
    borderColor: "#8b5cf6",
    icon: fileIcon,
  },
];
// 招商项目进度
const suggestions2 = [
  {
    title: "1. 项目基本信息",
    points: [
      "绿色智造产业园：招商主体-某市招商局，招商类型-外资项目，行业类别-高端制造，所在地区-江苏省X市，总投资额-25.0亿元",
      "智慧冷链物流中心：招商主体-XX控股集团，招商类型-民间合作，行业类别-物流，所在地区-河南省Y县，总投资额-8.5亿元",
      "医疗健康示范区：招商主体-Y市政府+医药集团，招商类型-PPP项目，行业类别-医疗健康，所在地区-广东省Z区，总投资额-12.0亿元",
    ],
    bgColor: "#e6fcf5",
    iconColor: "#10b981",
    borderColor: "#10b981",
    icon: checkIcon,
  },
  {
    title: "2. 项目进展阶段",
    points: [
      "绿色智造产业园：当前阶段-正式签约，预计落地时间-2025年10月，土地签约-完成，环评审批-审批中，建设开工-计划Q3，投产时间-2026年Q4，备注-面积约800亩",
      "智慧冷链物流中心：当前阶段-初步洽谈，预计落地时间-2026年中旬，土地签约-未签约，环评审批-未启动，建设开工-未定，投产时间-未定，备注-投资方拟引入外资",
      "医疗健康示范区：当前阶段-规划设计，预计落地时间-2025年12月，土地签约-谈判中，环评审批-进行中，建设开工-预计Q4，投产时间-2027年Q2，备注-涉及医养结合、康复中心等",
    ],
    bgColor: "#eff6ff",
    iconColor: "#3b82f6",
    borderColor: "#3b82f6",
    icon: targetIcon,
  },
  {
    title: "3. 资金投入及结构",
    points: [
      "绿色智造产业园：投资主体-德国某集团，自有资金比例-60%，银行贷款比例-30%，政府补贴-10%，风险投资占比-0%",
      "智慧冷链物流中心：投资主体-国内物流企业+VC机构，自有资金比例-40%，银行贷款比例-30%，政府补贴-15%，风险投资占比-15%",
      "医疗健康示范区：投资主体-政府+上市公司联合体，自有资金比例-50%，银行贷款比例-35%，政府补贴-15%，风险投资占比-0%",
    ],
    bgColor: "#fff7ed",
    iconColor: "#f97316",
    borderColor: "#f97316",
    icon: alertIcon,
  },
  {
    title: "4. 存在问题与风险",
    points: [
      "绿色智造产业园：当前问题-环评流程滞后，审批进展缓慢，风险等级-中，对策建议-加强协调环保部门",
      "智慧冷链物流中心：当前问题-投资方尚未明确，缺乏核心资金承诺，风险等级-高，对策建议-尽快明确主投方或引入国资",
      "医疗健康示范区：当前问题-规划设计变动频繁，可能影响工期，风险等级-低，对策建议-稳定设计方案，加强规划把控",
    ],
    bgColor: "#f5f3ff",
    iconColor: "#8b5cf6",
    borderColor: "#8b5cf6",
    icon: fileIcon,
  },
];

const open = () => {
  dialogRef.value.showModal();
};

const close = () => {
  dialogRef.value.close();
  emit("close");
};

defineExpose({
  open,
});
</script>

<style scoped>
.custom-tabs-container {
  width: 100%;
  position: relative;
}

.custom-tabs-nav {
  display: flex;
  position: relative;
  border-bottom: 1px solid #e5e7eb;
}

.custom-tab {
  position: relative;
  padding: 12px 24px;
  cursor: pointer;
  font-size: 16px;
  color: #5e6c84;
  display: flex;
  align-items: center;
}

.custom-tab-active {
  color: #4455f2;
  font-weight: 500;
}

.custom-tab-active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #4455f2;
}

.custom-tab-divider {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background-color: #e5e7eb;
}
</style>
